<template>
	<div class="doc_pc_components_Select">
		<div>
			插槽:
			<Select
				v-model="value"
				:options="options"
				style="width:150px;"
			>
				<template #option="{index,item,selectFn,selectedData:{isSelected}}">
					<div
						:key="item.value"
						:style="{
							color:item.disabled?'#ddd':null,
							background:isSelected(item)?'#c2ffc2':null,
						}"
						style="padding:10px 5px"
						@click="selectFn(item)"
					>插槽-{{index}}-{{item.label}}</div>
				</template>
				<template #prefix>
					<Icon
						name="bi-person-circle"
						style="flex-shrink:0"
					/>
				</template>
				<template #arrow>
					<Icon
						name="bi-caret-down-fill"
						style="flex-shrink:0"
					/>
				</template>
			</Select>
		</div>
		<div>
			显示/隐藏事件:
			<Select
				v-model="value"
				:options="options"
				:format="format"
				prefix-icon="bi-person-circle"
				style="width:150px;"
				@show="log('show')"
				@shown="log('shown')"
				@hide="log('hide')"
				@hidden="log('hidden')"
			/>
			{{value}}
		</div>
		<div>
			无数据:
			<Select
				:options="[]"
				style="width:100px;"
			/>
			<Select
				:options="[]"
				placeholder="你倒是选一个啊!"
				nodata-text="没有任何东西可选,不要看了!"
				style="width:170px;"
			/>
			<Select
				:options="[]"
				style="width:100px;"
			>
				<template #nodata="data">
					<div style="width:200px;height:200px;padding:20px">
						<div style="white-space:pre-wrap">{{data}}</div>
						插槽-没有内容~
					</div>
				</template>
			</Select>
		</div>
		<div>
			可清空:
			<Select
				v-model="value"
				:options="options"
				prefix-icon="bi-person-circle"
				clearable
				style="width:150px;"
				@select="log('select',$event)"
				@unselect="log('unselect',$event)"
				@clear="log('clear')"
			/>
			{{value}}
		</div>
		<div>
			发射整个选项:
			<Select
				v-model="value2"
				:options="options"
				prefix-icon="bi-person-circle"
				arrow-icon="bi-caret-down-fill"
				emit-option
				:before-select="beforeSelect"
				style="width:150px;"
			/>
			{{value2}}
		</div>
		<div>
			多选:
			<Select
				v-model="value3"
				:options="options2"
				prefix-icon="bi-person-circle"
				multiple
				clearable
				:before-select="beforeSelect"
				style="width:260px;"
				@select="log('select',$event)"
				@unselect="log('unselect',$event)"
			/>
			{{value3}}
		</div>
		<div>
			单选搜索:
			<Select
				v-model="value4"
				:options="options2"
				placeholder=""
				filterable
				style="width:150px;"
			/>
			<Select
				v-model="value4"
				:options="options2"
				filterable
				nomatch-text="你搜索的是啥子哦?"
				style="width:150px;"
			/>
			不限菜单高度:
			<Select
				v-model="value4"
				:options="options2"
				:max-height="null"
				filterable
				clearable
				style="width:150px;"
			>
				<template #nomatch="data">
					<div style="width:200px;height:200px;padding:20px">
						<div style="white-space:pre-wrap">{{data}}</div>
						插槽-匹配不到东西~
					</div>
				</template>
			</Select>
		</div>
		<div>
			多选搜索:
			<Select
				v-model="value5"
				:options="options2"
				placeholder=""
				filterable
				multiple
				clearable
				style="width:260px;"
			/>
			<Select
				v-model="value5"
				:options="options2"
				filterable
				multiple
				clearable
				style="width:260px;"
			/>
		</div>
		<div>
			单选宽度自适应:
			<Select
				v-model="value6"
				:options="options"
				clearable
				style="max-width:300px"
			/>
		</div>
		<div>
			单选搜索宽度自适应:
			<Select
				v-model="value6"
				:options="options"
				filterable
				clearable
				style="max-width:300px"
			/>
		</div>
		<div>
			多选宽度自适应:
			<Select
				v-model="value7"
				:options="options2"
				multiple
				clearable
				style="min-width:100px;max-width:300px"
			/>
		</div>
		<div>
			多选搜索宽度自适应:
			<Select
				v-model="value7"
				:options="options2"
				multiple
				filterable
				clearable
				style="min-width:100px;max-width:300px"
			/>
		</div>
		<div>
			禁用:
			<Select
				v-model="value"
				:options="options"
				prefix-icon="bi-person-circle"
				clearable
				disabled
				style="width:150px;"
			/>
			<Select
				v-model="value"
				:options="options"
				prefix-icon="bi-person-circle"
				clearable
				filterable
				disabled
				style="width:150px;"
			/>
		</div>
		<div>
			多选禁用:
			<Select
				v-model="value5"
				:options="options2"
				prefix-icon="bi-person-circle"
				multiple
				clearable
				disabled
				style="width:260px;"
			/>
			<Select
				v-model="value5"
				:options="options2"
				prefix-icon="bi-person-circle"
				multiple
				clearable
				filterable
				disabled
				style="width:260px;"
			/>
		</div>
		<div>
			圆角:
			<Select
				v-model="value"
				:options="options"
				shape="round"
				prefix-icon="bi-person-circle"
				clearable
				style="width:150px;"
			/>
			<Select
				v-model="value"
				:options="options"
				shape="round"
				prefix-icon="bi-person-circle"
				clearable
				filterable
				style="width:150px;"
			/>
			<Select
				v-model="value"
				:options="options"
				shape="round"
				prefix-icon="bi-person-circle"
				clearable
				disabled
				style="width:150px;"
			/>
			<Select
				v-model="value"
				:options="options"
				shape="round"
				prefix-icon="bi-person-circle"
				clearable
				filterable
				disabled
				style="width:150px;"
			/>
		</div>
		<div>
			多选圆角(无效):
			<Select
				v-model="value5"
				:options="options2"
				shape="round"
				prefix-icon="bi-person-circle"
				multiple
				clearable
				style="width:260px;"
			/>
			<Select
				v-model="value5"
				:options="options2"
				shape="round"
				prefix-icon="bi-person-circle"
				multiple
				clearable
				filterable
				style="width:260px;"
			/>
		</div>
		<div>
			<Select
				v-model="value5"
				:options="options2"
				shape="round"
				prefix-icon="bi-person-circle"
				multiple
				clearable
				disabled
				style="width:260px;"
			/>
			<Select
				v-model="value5"
				:options="options2"
				shape="round"
				prefix-icon="bi-person-circle"
				multiple
				clearable
				filterable
				disabled
				style="width:260px;"
			/>
		</div>
		<div>
			无边框:
			<Select
				v-model="value"
				:options="options"
				shape="noBorder"
				prefix-icon="bi-person-circle"
				clearable
				style="width:150px;"
			/>
			<Select
				v-model="value"
				:options="options"
				shape="noBorder"
				prefix-icon="bi-person-circle"
				clearable
				filterable
				style="width:150px;"
			/>
			<Select
				v-model="value"
				:options="options"
				shape="noBorder"
				prefix-icon="bi-person-circle"
				clearable
				disabled
				style="width:150px;"
			/>
			<Select
				v-model="value"
				:options="options"
				shape="noBorder"
				prefix-icon="bi-person-circle"
				clearable
				filterable
				disabled
				style="width:150px;"
			/>
		</div>
		<div>
			多选无边框:
			<Select
				v-model="value5"
				:options="options2"
				shape="noBorder"
				prefix-icon="bi-person-circle"
				multiple
				clearable
				style="width:260px;"
			/>
			<Select
				v-model="value5"
				:options="options2"
				shape="noBorder"
				prefix-icon="bi-person-circle"
				multiple
				clearable
				filterable
				style="width:260px;"
			/>
		</div>
		<div>
			<Select
				v-model="value5"
				:options="options2"
				shape="noBorder"
				prefix-icon="bi-person-circle"
				multiple
				clearable
				disabled
				style="width:260px;"
			/>
			<Select
				v-model="value5"
				:options="options2"
				shape="noBorder"
				prefix-icon="bi-person-circle"
				multiple
				clearable
				filterable
				disabled
				style="width:260px;"
			/>
		</div>
	</div>
</template>

<script setup>
import {shallowRef} from 'vue';
import {Select,Icon} from 'powerful-ui/pc-default';

const {log}=console;
const value=shallowRef('选项1');
const value2=shallowRef('3');
const value3=shallowRef(['选项1','选项2','选项3']);
const value4=shallowRef();
const value5=shallowRef(['选项1','选项2']);
const value6=shallowRef();
const value7=shallowRef([]);
const options=[
	{label:'超长选项超长选项超长选项超长选项超长选项',tag:'超长选项'},
	'选项1',
	'选项2',
	{label:'选项3',value:'3',_disabled:true},
	{label:'选项4',value:'4',tag:'tag4'},
	{label:'选项5'},
];
const options2=[];
for(let i=1;i<5e3;++i){
	options2.push(`选项${i}`);
}
options2[2]={label:'选项3',_disabled:true};
options2[3]={label:'选项4',_disabled:true};
function format(val){
	return '格式化:'+val;
}
function beforeSelect(data){
	console.log('beforeSelect',data);
}
</script>

<style lang="scss">
.doc_pc_components_Select{
	>div{
		margin:20px;
	}
}
</style>